<template>
  <div class="personInfor-page">
    <div class="personInfor-title">
      <div class="returnPage" @click="returnPage">返回</div>
    </div>
    <div class="personInfor-content">
      <!-- 住宅地价指数统计 -->
      <div class="personInfor-gird personInfor-gird-one">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title01.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.priceIndexData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.priceIndexData).length > 0"
            :housingSupplyStatsData="personHouseData.priceIndexData"
          ></bar-line-pbulic>
           
          <div
            class="time-com"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.data1 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeYear :type="{ type: 1, times: personHouseData.data1 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
        </div>
      </div>
      <!-- map -->
      <div class="personInfor-gird personInfor-gird-two" style="position: relative; background-color: rgba(0, 0, 0, 0)">
        <mapBox
          v-if="Object.keys(personHouseData.personHouseMiddleData).length > 0"
          :housingSupplyStatsData="personHouseData.personHouseMiddleData"
          :cityName="personHouseData.cityName"
          @mapNameChange="mapNameChange"
          style="height: 100%; width: 100%"
        ></mapBox>
        <div class="map-address">辽宁省{{ personHouseData.cityName == "" ? "" : "-" + personHouseData.cityName }}</div>
      </div>
      <!-- 国有土地使用权收入额走势 -->
      <div class="personInfor-gird personInfor-gird-three">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title03.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.transactionData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.transactionData).length > 0"
            :housingSupplyStatsData="personHouseData.transactionData"
          ></bar-line-pbulic>
          <div class="time-com">
            {{ personHouseData.data2[0] }}至{{ personHouseData.data2[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeSelect :type="{ type: 2, times: personHouseData.data2 }" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
      </div>
      <!-- 住宅地价指数走势 -->
      <div class="personInfor-gird personInfor-gird-four">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title04.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.priceTrendData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.priceTrendData).length > 0"
            :housingSupplyStatsData="personHouseData.priceTrendData"
          ></bar-line-pbulic>
          <div class="time-com">
            {{ personHouseData.data3[0] }}至{{ personHouseData.data3[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeSelect :type="{ type: 3, times: personHouseData.data3 }" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
      </div>
      <!-- 土地成交情况统计 -->
      <div class="personInfor-gird personInfor-gird-five">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title05.png" alt="" />
        <div class="add-trend">
          <div class="pie-box">
            <div class="pie-box-item">
              <img class="pie-bg" src="@/assets/img/LandSupplyAlert/pie-l.png" alt="" />
              <pie-pbulic
                @click="fullSc('pie-pbulic', personHouseData.residentialTrendData)"
                v-if="Object.keys(personHouseData.residentialTrendData).length > 0"
                :housingSupplyStatsData="personHouseData.residentialTrendData"
                class="h361"
                style="width: 100%"
              ></pie-pbulic>
            </div>
            <div class="pie-box-item">
              <img class="pie-bg" src="@/assets/img/LandSupplyAlert/pie-r.png" alt="" />
              <pie-pbulic
                @click="fullSc('pie-pbulic', personHouseData.residentialTrendDataR)"
                v-if="Object.keys(personHouseData.residentialTrendDataR).length > 0"
                :housingSupplyStatsData="personHouseData.residentialTrendDataR"
                class="h361"
                style="width: 100%"
              ></pie-pbulic>
            </div>
          </div>
          <div
            class="time-com"
            style="display: flex; justify-content: space-between; align-items: center; padding-left: 10px; box-sizing: border-box"
          >
            {{ personHouseData.data4 }}
            <img style="margin-top: 5px" src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeYear :type="{ type: 4, times: personHouseData.data4 + '01' }" @timeValueChange="timeValueChanges"></timeYear>
        </div>
      </div>
      <!-- 土地成交走势 -->
      <div class="personInfor-gird personInfor-gird-sex">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title06.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.residentialRentPriceIndexData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.residentialRentPriceIndexData).length > 0"
            :housingSupplyStatsData="personHouseData.residentialRentPriceIndexData"
          ></bar-line-pbulic>
          <div class="time-com">
            {{ personHouseData.data5[0] }}至{{ personHouseData.data5[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeSelect :type="{ type: 5, times: personHouseData.data5 }" @timeValueChange="timeValueChanges"></timeSelect>
          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index)"
              :class="index == personHouseData.listInd ? 'active' : ''"
              v-for="(item, index) in personHouseData.list"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- 住宅地价及同比增长率走势 -->
      <div class="personInfor-gird personInfor-gird-seven">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title07.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.andPriceData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.andPriceData).length > 0"
            :housingSupplyStatsData="personHouseData.andPriceData"
          ></bar-line-pbulic>
          <div class="time-com">
            {{ personHouseData.data6[0] }}至{{ personHouseData.data6[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeSelect :type="{ type: 6, times: personHouseData.data6 }" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
      </div>
      <!-- 异常情况走势 -->
      <div class="personInfor-gird personInfor-gird-eight">
        <img class="personInfor-gird-title" src="@/assets/img/LandSupplyAlert/title08.png" alt="" />
        <div class="add-trend">
          <bar-line-pbulic
            @click="fullSc('bar-line-pbulic', personHouseData.housingVacancyRateData)"
            class="h263"
            style="width: 100%"
            v-if="Object.keys(personHouseData.housingVacancyRateData).length > 0"
            :housingSupplyStatsData="personHouseData.housingVacancyRateData"
          ></bar-line-pbulic>
          <div class="time-com">
            {{ personHouseData.data7[0] }}至{{ personHouseData.data7[1] }}
            <img src="@/assets/img/realEstate/triangle.png" alt="" />
          </div>
          <timeSelect :type="{ type: 7, times: personHouseData.data7 }" @timeValueChange="timeValueChanges"></timeSelect>
        </div>
      </div>

      <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
      <el-dialog v-model="personHouseData.dialogVisible" width="60%">
        <component
          :is="personHouseData.componentName"
          v-if="personHouseData.dialogVisible"
          :housingSupplyStatsData="personHouseData.componentParams"
          :type="1"
          :style="{ height: pxToRem(500) + 'px' }"
        ></component>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/barLinePbulic.vue";
import piePbulic from "@/components/LandSupplyAlert/pie.vue";
export default {
  components: { barLinePbulic, piePbulic },
};
</script>

<script setup lang="ts">
import { pxToRem } from "@/utils/index";
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/propertyAlertResale/map.vue";
import { useRouter } from "vue-router";
import {
  getBaseMap,
  getHouseLandStatistics,
  getHouseLandTrend,
  getLandAbnormalTrend,
  getLandDealStatistics,
  getLandDealTrend,
} from "@/api/LandSupplyAlert";
import usePropertyAlertResale from "@/hooks/LandSupplyAlert/useLandSupplyAlert";
import timeSelect from "@/components/propertyAlertResale/timeSelect.vue";
import timeYear from "@/components/propertyAlertResale/timeYear.vue";

const personHouseData = usePropertyAlertResale();
const router = useRouter();
// 返回
const returnPage = (val: any) => {
  router.go(-1);
};
// 住宅地价指数统计
const priceIndexData = async () => {
  let { data } = await getHouseLandStatistics({
    cityCode: personHouseData.cityCode,
    queryDate: personHouseData.data1,
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["价格指数", "同比增长率"],
    data.xAxis,
    [
      {
        name: "指数",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.jgzsList, data.tbList],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#F0C44B",
        b: "#E38319",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.priceIndexData = paramsData;
};
// 3国有土地使用权收入额走势
const transaction = async () => {
  let { data } = await getHouseLandTrend({
    cityCode: personHouseData.cityCode,
    startDate: personHouseData.data2[0],
    endDate: personHouseData.data2[1],
    queryType: "3",
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["国有土地收入额", "同比增长率"],
    data.xAxis,
    [
      {
        name: "金额",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.jgzsList, data.tbList],
    [
      {
        a: "#E47D7D",
        b: "#CC3E3E",
      },
      {
        a: "#29F1FA",
        b: "#29F1FA",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.transactionData = paramsData;
};
// 1获取住宅地价指数走势
const priceTrend = async () => {
  let { data } = await getHouseLandTrend({
    cityCode: personHouseData.cityCode,
    startDate: personHouseData.data3[0],
    endDate: personHouseData.data3[1],
    queryType: "1",
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["价格指数", "同比增长率"],
    data.xAxis,
    [
      {
        name: "价格指数",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.jgzsList, data.tbList],
    [
      {
        a: "#24E1E7",
        b: "#086063",
      },
      {
        a: "#E55151",
        b: "#E55151",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.priceTrendData = paramsData;
};
// 土地成交走势
const residentialRentPriceIndex = async () => {
  let { data } = await getLandDealTrend({
    cityCode: personHouseData.cityCode,
    startDate: personHouseData.data5[0],
    endDate: personHouseData.data5[1],
    queryType: personHouseData.listInd + 6,
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    [],
    data.xAxis,
    [
      {
        name: "面积",
        type: "1",
      },
      {
        name: "成交金额",
        type: "2",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    [data.mjList, data.cjeList],
    [
      {
        a: "rgba(74, 111, 227, 1)",
        b: "rgba(74, 111, 227, 0)",
      },
      {
        a: "rgba(240, 195, 75, 1)",
        b: "rgba(240, 195, 75, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.residentialRentPriceIndexData = paramsData;
};
// 2获取住宅地价及同比增长率走势
const andPrice = async () => {
  let { data } = await getHouseLandTrend({
    cityCode: personHouseData.cityCode,
    startDate: personHouseData.data6[0],
    endDate: personHouseData.data6[1],
    queryType: "2",
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["住宅地价", "同比增长率"],
    data.xAxis,
    [
      {
        name: "价格",
        type: "1",
      },
      {
        name: "同比增长率",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.jgzsList, data.tbList],
    [
      {
        a: "#4F73E7",
        b: "#183FB9",
      },
      {
        a: "#F0C34B",
        b: "#F0C34B",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.andPriceData = paramsData;
};
// 获取异常情况走势
const landAbnormalTrend = async () => {
  let { data } = await getLandAbnormalTrend({
    cityCode: personHouseData.cityCode,
    startDate: personHouseData.data7[0],
    endDate: personHouseData.data7[1],
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "3%",
    bottom: "5%",
    top: "25%",
  };
  let paramsData = barLineParamsData(
    ["单价创新高", "总价创新高", "溢价率超50%"],
    data.xAxis,
    [
      {
        name: "面积",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "2",
        stack: "1",
      },
    ],
    [data.y1, data.y2, data.y3],
    [
      {
        a: "rgba(41, 241, 250, 1)",
        b: "rgba(41, 241, 250, 0)",
      },
      {
        a: "rgba(229, 81, 81, 1)",
        b: "rgba(229, 81, 81, 0)",
      },
      {
        a: "rgba(228, 135, 29, 1)",
        b: "rgba(228, 135, 29, 0)",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.housingVacancyRateData = paramsData;
};
// 获取土地成交情况统计 = 4-住宅用地交易统计/5-住宅交易异常原因统计
const landDealStatistics = async () => {
  let { data } = await getLandDealStatistics({
    cityCode: personHouseData.cityCode,
    queryDate: personHouseData.data4,
    queryType: 4,
  });
  let params = {
    innerColor: ["#E4871D", "#2586EE"],
    innerCircle: data,
  };
  personHouseData.residentialTrendData = params;
};
const landDealStatistics1 = async () => {
  let { data } = await getLandDealStatistics({
    cityCode: personHouseData.cityCode,
    queryDate: personHouseData.data4,
    queryType: 5,
  });
  let params = {
    innerColor: ["#E27979", "#4A6FE3", "#23DBE1"],
    innerCircle: data,
  };
  personHouseData.residentialTrendDataR = params;
};
// 地图
const personHouseMiddle = async () => {
  let { data } = await getBaseMap({});
  personHouseData.personHouseMiddleData = data;
};
// 子组件触发当前选中项
const mapNameChange = (data: any) => {
  if (personHouseData.cityName == data.cityName) {
    (personHouseData.cityName = ""), (personHouseData.cityCode = "210000");
  } else {
    (personHouseData.cityName = data.cityName), (personHouseData.cityCode = data.cityCode);
  }
  allFun();
};

// 获取时间组件时间
const timeValueChanges = (va: any) => {
  console.log(va);
  if (va.type == 1) {
    personHouseData.data1 = va.times;
    priceIndexData();
  } else if (va.type == 2) {
    personHouseData.data2 = va.times;
    transaction();
  } else if (va.type == 3) {
    personHouseData.data3 = va.times;
    priceTrend();
  } else if (va.type == 4) {
    personHouseData.data4 = va.times;
    landDealStatistics();
    landDealStatistics1();
  } else if (va.type == 5) {
    personHouseData.data5 = va.times;
    residentialRentPriceIndex();
  } else if (va.type == 6) {
    personHouseData.data6 = va.times;
    andPrice();
  } else if (va.type == 7) {
    personHouseData.data7 = va.times;
    landAbnormalTrend();
  }
};

const listInd = (ind: any) => {
  personHouseData.listInd = ind;
  residentialRentPriceIndex();
};

// 查询
const allFun = () => {
  personHouseMiddle();
  priceIndexData();
  transaction();
  priceTrend();
  residentialRentPriceIndex();
  landAbnormalTrend();
  andPrice();
  landDealStatistics();
  landDealStatistics1();
};

const fullSc = (componentName: any, componentParams: any) => {
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
};

allFun();
</script>

<style scoped lang="less">
.h563 {
  height: 433px;
}
.h263 {
  height: 260px;
}
.h361 {
  height: 361px;
}
::v-deep .el-dialog {
  background-color: rgba(8, 64, 132, 0.9);
}
.personInfor-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/personInfor/bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0px;
  }
  .personInfor-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 22px;
    background: url("@/assets/img/LandSupplyAlert/header-bg.png");
    background-size: 100% 100%;
  }
  .personInfor-content {
    width: 100vw;
    height: calc(100vh - 111px);
    display: grid;
    grid-gap: 20px 18px;
    grid-template: repeat(6, 140px) / repeat(3, 595px);
    place-content: start center;
    .personInfor-gird {
      color: #fff;
      position: relative;
      background: rgba(9, 70, 145, 0.15);
      .personInfor-gird-title {
        width: 100%;
        height: 34px;
      }
      /deep/ .el-range-editor.el-input__wrapper {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
      /deep/ .el-date-editor.el-input {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
      /deep/ .el-radio.el-radio--large {
        color: white;
        margin-right: 18px;
      }
      .time-com {
        width: 150px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        background: rgba(27, 126, 242, 0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(41, 240, 250, 0.6);
        font-weight: 400;
        font-size: 12px;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: right;
        img {
          width: 9px;
          height: 6px;
          position: relative;
          bottom: 2px;
          margin-right: 4px;
        }
      }
      .time-com:hover {
        cursor: pointer;
      }
    }
    .add-trend {
      display: flex;
      padding: 11px 11px 11px 6px;
      box-sizing: border-box;
      width: 100%;
    }
    .personInfor-gird-one {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }
    .personInfor-gird-two {
      grid-column: 2 / 3;
      grid-row: 1 / 4;
    }
    .personInfor-gird-three {
      grid-column: 3 / 4;
      grid-row: 1 / 3;
    }
    .personInfor-gird-four {
      grid-column: 1 / 2;
      grid-row: 3 / 5;
    }
    .personInfor-gird-five {
      grid-column: 2 / 3;
      grid-row: 4 / 7;
    }
    .personInfor-gird-sex {
      grid-column: 3 / 4;
      grid-row: 3 / 5;
      position: relative;
      .personInfor-gird-four-labed {
        position: absolute;
        top: 0;
        right: 27px;
        z-index: 100;
        display: flex;
        align-items: center;
        div {
          width: 90px;
          height: 34px;
          line-height: 34px;
          text-align: center;
          font-size: 16px;
          color: #ffffff;
          cursor: pointer;
        }
        .active {
          background-image: url("@/assets/img/propertyAlertResale/labed-bg.png");
          background-size: 100% 100%;
        }
      }
    }
    .personInfor-gird-seven {
      grid-column: 1 / 2;
      grid-row: 5 / 7;
    }
    .personInfor-gird-eight {
      grid-column: 3 / 4;
      grid-row: 5 / 7;
      .start-time /deep/ .el-range-editor.el-input__wrapper {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 82px;
        padding: 0;
        opacity: 1;
      }
      .start-time /deep/ .el-date-editor.el-input {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 82px;
        padding: 0;
      }
      .end-time /deep/ .el-range-editor.el-input__wrapper {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
      .end-time /deep/ .el-date-editor.el-input {
        width: 75px;
        height: 16px;
        position: absolute;
        top: 45px;
        right: 7px;
        padding: 0;
      }
    }
  }
}

.time-list-box {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  height: 21px;
}

.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}

.pie-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0rpx 20px 34px 20px;
}
.pie-box-item {
  width: 50%;
  .pie-bg {
    width: 269px;
    height: 16px;
    margin-top: 45px;
    display: block;
  }
}
</style>
